<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
        <a-row>
          <a-col :span="24">
            <a-form-model-item label="班级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="classId">
              <j-dict-select-tag type="list" :disabled="editDisabled" v-model="model.classId"  dictCode="sk_class,class_name,id,del_flag = 0 order by sort_no asc" placeholder="请选择班级" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="学生" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="studentId">
              <j-dict-select-tag type="list" :disabled="editDisabled" @change="getBmiData" v-model="model.studentId" :dictCode="`sk_student,name,id,del_flag=0 and class_id=${model.classId} and del_flag=0`" placeholder="请选择学生" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="残疾记录" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="disability">
              <a-textarea v-model="model.disability" :maxLength="255" :autosize="{ minRows: 4 }" placeholder="请输入残疾记录" />
              <div style="text-align: right;margin:0;line-height: 20px;" v-if="!formDisabled">{{model.disability?model.disability.length :0}}/255</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="既往病史" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="medicalHistory">
              <a-textarea v-model="model.medicalHistory" :maxLength="255" :autosize="{ minRows: 4 }" placeholder="请输入既往病史" />
              <div style="text-align: right;margin:0;line-height: 20px;" v-if="!formDisabled">{{model.medicalHistory?model.medicalHistory.length :0}}/255</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="过敏类型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="allergyType">
              <a-textarea v-model="model.allergyType" :maxLength="255" :autosize="{ minRows: 4 }" placeholder="请输入过敏类型" />
              <div style="text-align: right;margin:0;line-height: 20px;" v-if="!formDisabled">{{model.allergyType?model.allergyType.length :0}}/255</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="过敏源" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="allergySource">
              <a-textarea v-model="model.allergySource" :maxLength="255" :autosize="{ minRows: 4 }" placeholder="请输入过敏源" />
              <div style="text-align: right;margin:0;line-height: 20px;" v-if="!formDisabled">{{model.allergySource?model.allergySource.length :0}}/255</div>
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="是否校园就餐" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="eatOnCampus">
              <j-dict-select-tag type="list" v-model="model.eatOnCampus" dictCode="eat_on_campus" placeholder="请选择是否校园就餐" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="体型" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="bodilyForm">
              <j-dict-select-tag type="list" v-model="model.bodilyForm" dictCode="bmi_status" placeholder="请选择体型" disabled />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item label="其他说明" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="other">
              <a-textarea v-model="model.other" :maxLength="255" :autosize="{ minRows: 4 }" placeholder="请输入其他说明" />
              <div style="text-align: right;margin:0;line-height: 20px;" v-if="!formDisabled">{{model.other?model.other.length :0}}/255</div>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import { validateDuplicateValue } from '@/utils/util'
  import { ajaxGetDictItems,getDictItemsFromCache} from '@/api/api'
  export default {
    name: 'SkStudentSpecialForm',
    components: {
    },
    props: {
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        editDisabled:false,
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          classId: [
              { required: true, message: '请选择班级!'},
           ],
           studentId: [
              { required: true, message: '请输入学生!'},
           ],
           eatOnCampus: [
              { required: true, message: '请输入是否校园就餐!'},
           ],
        },
        url: {
          add: "/management/skStudentSpecial/add",
          edit: "/management/skStudentSpecial/edit",
          queryById: "/management/skStudentSpecial/queryById"
        },
        bmiStandard:[]
      }
    },
    computed: {
      formDisabled(){
        return this.disabled
      },
    },
    created () {
       //备份model原始值
      this.modelDefault = JSON.parse(JSON.stringify(this.model));
      this.initDictData();
    },
    methods: {
      add () {
        this.edit(this.modelDefault);
      },
      edit (record) {
        this.model = Object.assign({}, record);
        if (this.model.id) {
          this.editDisabled = true;
        }
        this.visible = true;
        
      },
      initDictData() {
        //根据字典Code, 初始化字典数组
        ajaxGetDictItems('bmi_standard', null).then((res) => {
          if (res.success) {
            this.bmiStandard = res.result;
          }
        })
      },
      // 获取学生身高体重数据
      getBmiData(id){
        
        console.log(id);
        const url = "/health/skBmiRecord/getBmiRecord"
        const params= {
          studentId:id
        }
        getAction(url,params).then((res)=>{
          if(res.success){
            let bmi = Number((res.result.bimData[0].weight / Math.pow(res.result.bimData[0].height / 100, 2)).toFixed(2));
            let bodilyForm = this.caculateBMIStatus(bmi);
            this.model.bodilyForm = bodilyForm
            this.$forceUpdate()
          } else {
            this.$message.warning(res.message);
          }
        }).catch((error)=>{
          console.error(error);
        })
      },
      // 计算BMI状态
      caculateBMIStatus(bmiValue) {
        let bodilyForm = 1;
        this.bmiStandard.forEach(item => {
          switch(item.text) {
            case 'thin':
              if (bmiValue < item.value) {
               bodilyForm = 0;
              }
              break;
            case 'normal':
              if (bmiValue > item.value) {
                bodilyForm = 2;
              }
              break;
            case 'fat':
              if (bmiValue > item.value) {
                bodilyForm = 3;
              }
              break;
          }
        });
        return bodilyForm;
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.$refs.form.validate(valid => {
          if (valid) {
            Reflect.deleteProperty(this.model,'classId');
            that.confirmLoading = true;
            this.$emit("modelLoading",that.confirmLoading)
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              this.$emit("modelLoading",that.confirmLoading)
            })
          }
         
        })
      },
    }
  }
</script>
<style lang="less" scoped>
.ant-select-disabled{
  color:rgba(0, 0, 0, 0.65);
  /deep/ .ant-select-selection{
    background: #fff ;
  }
}
 
</style>